<!--
 * @Author: zhangjingyu
 * @Date: 2020-11-15 16:15:47
 * @LastEditors: zhangjingyu
 * @LastEditTime: 2020-12-31 14:31:57
 * @FilePath: \vprisk10.14\src\views\SystemMange\passwordConfig.vue
 * @Description: 密码配置
-->

<template>
  <!-- 密码配置页面 -->
  <div id="pwdconfig">
    <h2 class="passwardtitle">密码配置</h2>
    <el-row :gutter="20">
      <br />
      <br />
      <el-form
        :model="pwdConfigForm"
        ref="saveForm"
        :rules="rules"
        :label-position="'left'"
        label-width="300px"
      >
        <!-- <el-col ></el-col> -->
        <el-col :offset="2" :span="22">
          <el-form-item label="密码长度最小值(6-20)：" prop="minLength">
            <el-input
              v-model="pwdConfigForm.minLength"
              style="width:571px"
              type="text"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :offset="2" :span="22">
          <el-form-item label="密码长度最大值(6-20)：" prop="maxLength">
            <el-input
              v-model="pwdConfigForm.maxLength"
              style="width:571px"
              type="text"
            ></el-input>
          </el-form-item>
        </el-col>
        <!-- ------------------------------- -->
        <el-col :offset="2" :span="22">
          <el-form-item label="是否包含大写英文字母(A-Z)：" prop="containsBigaz">
            <el-radio-group v-model="pwdConfigForm.containsBigaz">
              <el-radio
               v-for="item in dictList"
               :label="item.value"
                :key="item.value"
               >{{item.label}}</el-radio>
            </el-radio-group>
        
          </el-form-item>
        </el-col>
        <el-col :offset="2" :span="22">
          <el-form-item label="是否包含小写英文字母(a-z)：" prop="containsLittleaz">
           <el-radio-group v-model="pwdConfigForm.containsLittleaz">
              <el-radio
               v-for="item in dictList"
               :label="item.value"
                :key="item.value"
               >{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <!-- -------------------------------------- -->

        <el-col :offset="2" :span="22">
          <el-form-item label="是否包含数字(0-9)：" prop="contains09">
             <el-radio-group v-model="pwdConfigForm.contains09">
              <el-radio
               v-for="item in dictList"
               :label="item.value"
                :key="item.value"
               >{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :offset="2" :span="22">
          <el-form-item
            label="包含特殊字符(多个依次填写)："
            prop="containsSpecialChars"
          >
            <el-input
              v-model="pwdConfigForm.containsSpecialChars"
              style="width:571px"
              maxlength="32"
              type="text"
            ></el-input>
          </el-form-item>
        </el-col>
        <!-- ------------------------------------------------------------------------------- -->
        <el-col :offset="2" :span="22">
          <el-form-item label="不包含用户名：" prop="notContainsUsername">
            <el-radio-group v-model="pwdConfigForm.notContainsUsername">
              <el-radio
               v-for="item in dictList"
               :label="item.value"
                :key="item.value"
               >{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :offset="2" :span="22">
          <el-form-item
            label="历史密码重复次数(0-20)："
            prop="notRepeatHisNumbs"
          >
            <el-input
              v-model="pwdConfigForm.notRepeatHisNumbs"
              style="width:571px"
              type="text"
            ></el-input>
          </el-form-item>
        </el-col>

        <!-- ------------------------------------------------------------------------------* -->

        <el-col :offset="2" :span="22">
          <el-form-item label="首次登录是否修改：" prop="atFirstLogin">
             <el-radio-group v-model="pwdConfigForm.atFirstLogin">
              <el-radio
               v-for="item in dictList"
               :label="item.value"
                :key="item.value"
               >{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :offset="2" :span="22">
          <el-form-item
            label="密码修改间隔时间(30天及以上)："
            prop="lastTimeIn"
          >
            <el-input
              v-model="pwdConfigForm.lastTimeIn"
              style="width:571px"
              type="text"
            ></el-input>
          </el-form-item>
        </el-col>

        <!-- ---------------------------------------------------------------------------------------------------- -->
        <el-col :offset="2" :span="22">
          <el-form-item label="密码锁定错误次数(0-20)：" prop="errorNumbs">
            <el-input
              v-model="pwdConfigForm.errorNumbs"
              style="width:571px"
              type="text"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <br />
    <el-row>
      <el-col  :span="20" style="text-align:center;margin-top:30px">
        <el-button style="width:200px" @click="saveFunc">
          确 认
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { systemManage } from "@/api/index";
export default {
  data() {
    return {
      dictList: [
        { value: "1", label: "启用" },
        { value: "0", label: "撤销" },
      ],
      pwdConfigForm: {
        operateType: "",
        minLength: "6",
        maxLength: "8",
        containsBigaz: "0",
        containsLittleaz: "0",
        contains09: "0",
        containsSpecialChars: "",
        notContainsUsername: "0",
        notRepeatHisNumbs: "20",
        atFirstLogin: "1",
        lastTimeIn: "180",
        errorNumbs: "20"
      },
      rules: {
        minLength: [
          { required: true, message: "该输入项为必输项", trigger: "blur" },
          { validator: this.valid6_20, trigger: "blur" }
        ],
        maxLength: [
          { required: true, message: "该输入项为必输项", trigger: "blur" },
          { validator: this.valid6_20max, trigger: "blur" }
        ],
        notRepeatHisNumbs: [
          { required: true, message: "该输入项为必输项", trigger: "blur" },
          { validator: this.valid0_20, trigger: "blur" }
        ],
        lastTimeIn: [
          { required: true, message: "该输入项为必输项", trigger: "blur" },
          { validator: this.valid30, trigger: "blur" }
        ],
        errorNumbs: [
          { required: true, message: "该输入项为必输项", trigger: "blur" },
          { validator: this.valid0_20, trigger: "blur" }
        ],
        containsSpecialChars: [
          {
            pattern: /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]+/,
            message: "请输入特殊符号",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.searchFunc();
  },
  methods: {
    // 0-20校验
    valid0_20(rule, value, callback) {
      let errflg = false;
      for (let i = 0; i < 21; i++) {
        if (value == i + "") {
          errflg = true;
          break;
        }
      }
      if (!errflg) return callback(new Error("请输入0-20的整数！"));
      else callback();
    },
    // 6-20校验
    valid6_20(rule, value, callback) {
      let errflg = false;
      for (let i = 6; i < 21; i++) {
        if (value == i + "") {
          errflg = true;
          break;
        }
      }
      if (!errflg) return callback(new Error("请输入6-20的整数！"));
      else callback();
    },
    // valid6_20max
    valid6_20max(rule, value, callback) {
      let errflg = false;
      for (let i = 6; i < 21; i++) {
        if (value == i + "") {
          errflg = true;
          break;
        }
      }
      if (!errflg) return callback(new Error("请输入6-20的整数！"));
      if (this.pwdConfigForm.minLength * 1 > this.pwdConfigForm.maxLength * 1) {
        return callback(new Error("密码长度最小值不能大于最大值！"));
      }
      callback();
    },
    // 大于30
    valid30(rule, value, callback) {
      if (!value * 1) return callback(new Error("请输入大于30的正整数"));
      if (
        value.indexOf(".") != -1 ||
        value.indexOf("-") != -1 ||
        value.indexOf("+") != -1 ||
        value.indexOf("e") != -1
      )
        return callback(new Error("请输入大于30的正整数"));
      if (value * 1 < 30) return callback(new Error("请输入大于30的正整数"));
      callback();
    },
    searchFunc() {
      systemManage.findDefPasswordRule().then(res => {
        if (res.code == 200) {
          this.pwdConfigForm = res.data;
        }
      });
    },
    saveFunc() {
      this.$refs["saveForm"].validate(valid => {
        if (valid) {
          console.log(valid);
          let data = {
            ...this.pwdConfigForm
          };
          systemManage
            .savePasswordRule(data)
            .then(res => {
              if (res.code == 200) {
                this.$message.success(res.message || "数据保存成功");
                this.searchFunc();
              } else {
                this.$message.error(res.message);
              }
            })
            .catch(err => {});
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.passwardtitle {
  margin: 16px 30px;
  font-size: 14px;
}
.passwardtitle::before {
  content: "";
  width: 4px;
  height: 10px;
  display: inline-block;
  background: linear-gradient(180deg, #ea8a5e 0%, #d15230 100%);
  line-height: 12px;
  margin-right: 6px;
}
.el-radio {
    margin-right: 128px;
}
/deep/.el-form-item > .el-form-item__label {
  
    font-size: 14px !important;
}
</style>